/*eslint-disable*/
<template>
    <div class="Nav">
      <!-- 侧边导航栏，使用route实现路由跳转 -->
        <el-menu
        active-text-color="#ffd04b"
        class="el-menu-vertical"
        text-color="black"
        @select="handleSelect"
        :collapse="!isCollapse"
        :default-active="activeIndex"
        router
      >
       <el-menu-item index="/adminSearch" route="/adminSearch" v-if="isAdmin">
          <el-icon><icon-menu /></el-icon>
          <router-link to="/index"></router-link>
          <span>查看博文</span>
        </el-menu-item>
        <el-menu-item index="/myblog" route="/myblog" v-if="!isAdmin">
          <el-icon><icon-menu /></el-icon>
          <router-link to="/index"></router-link>
          <span>我的博文</span>
        </el-menu-item>
        <el-menu-item index="/createblog" route="/createblog" v-if="!isAdmin">
          <el-icon><document /></el-icon>
          <span>创建博文</span>
        </el-menu-item>
         <el-menu-item index="/passBlog" route="/passBlog" v-if="isAdmin">
          <el-icon><icon-menu /></el-icon>
          <router-link to="/index"></router-link>
          <span>审核博文</span>
        </el-menu-item>
      </el-menu>
    </div>
    
</template>

<script lang="ts" setup>
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from '@element-plus/icons-vue'
import { ref } from 'vue';
let activeIndex = "/myblog"
if (window.location.pathname === '/createblog') {
  activeIndex = "/createblog"
} else if (window.location.pathname === '/adminSearch') {
  activeIndex = "/adminSearch"
} else if (window.location.pathname === '/passBlog') {
  activeIndex = "/passBlog"
}
let isCollapse = true;
let isAdmin = ref(false);

if (localStorage.getItem('userRole') == '1') {
        isAdmin.value = true;
    }
else isAdmin.value = false;

const handleSelect = (key: string, keyPath: string[]) => {
   window.location.href = "http://localhost:8080" + keyPath;
}
</script>

<style scoped>
.Nav{
    height: 789px;
    width: 157px;
}
.el-menu-vertical{
    height: 100%;
}
</style>